<template>
    <view class="container">
        <!-- 状态切换栏 -->
        <view class="tab-bar">
            <view 
                v-for="(tab, index) in tabs" 
                :key="index"
                class="tab-item"
                :class="{ active: currentTab === index }"
                @tap="switchTab(index)"
            >
                {{ tab.name }}
            </view>
        </view>

        <!-- 订单列表 -->
        <scroll-view 
            class="order-list"
            scroll-y
            @scrolltolower="loadMore"
            :style="{ height: scrollHeight + 'px' }"
        >
            <view v-if="orderList.length > 0">
                <view 
                    class="order-item"
                    v-for="item in orderList"
                    :key="item.id"
                    @tap="goToDetail(item.id)"
                >
                    <view class="order-header">
                        <text class="hospital-name">{{ item.hospitalName }}</text>
                        <text class="order-status" :class="'status-' + item.status">
                            {{ getStatusText(item.status) }}
                        </text>
                    </view>
                    
                    <view class="order-content">
                        <view class="info-row">
                            <text class="label">设备编号：</text>
                            <text class="value">{{ item.deviceNo }}</text>
                        </view>
                        <view class="info-row">
                            <text class="label">科室床位：</text>
                            <text class="value">{{ item.departmentName }} {{ item.bedNo }}</text>
                        </view>
                        <view class="info-row">
                            <text class="label">使用时间：</text>
                            <text class="value">{{ formatTime(item.startTime) }}</text>
                        </view>
                    </view>
                    
                    <view class="order-footer">
                        <view class="price">
                            <text>￥{{ item.totalAmount }}</text>
                        </view>
                        <view class="actions">
                            <!-- 使用中的订单显示结束使用按钮 -->
                            <button 
                                v-if="item.status === 1"
                                class="action-btn primary"
                                @tap.stop="endUse(item.id)"
                            >结束使用</button>
                            
                            <!-- 待支付的订单显示支付按钮 -->
                            <button 
                                v-if="item.status === 0"
                                class="action-btn primary"
                                @tap.stop="payOrder(item.id)"
                            >立即支付</button>
                            
                            <!-- 已完成的订单显示再次使用按钮 -->
                            <button 
                                v-if="item.status === 2"
                                class="action-btn"
                                @tap.stop="useAgain(item.deviceNo)"
                            >再次使用</button>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 空状态 -->
            <view v-else class="empty-state">
                <image src="/static/images/empty-order.png" mode="aspectFit"></image>
                <text>暂无相关订单</text>
            </view>
            
            <!-- 加载更多 -->
            <view class="loading-more" v-if="orderList.length > 0">
                {{ hasMore ? '加载中...' : '没有更多了' }}
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { getOrderList, endOrder, payOrder } from '@/api/order'

export default {
    data() {
        return {
            tabs: [
                { name: '全部', status: -1 },
                { name: '使用中', status: 1 },
                { name: '待支付', status: 0 },
                { name: '已完成', status: 2 }
            ],
            currentTab: 0,
            orderList: [],
            page: 1,
            pageSize: 10,
            hasMore: true,
            scrollHeight: 0,
            loading: false
        }
    },
    onLoad() {
        // 计算scroll-view高度
        const systemInfo = uni.getSystemInfoSync()
        this.scrollHeight = systemInfo.windowHeight - 44 // 44为tab-bar的高度
        
        this.loadOrders()
    },
    methods: {
        // 切换标签
        async switchTab(index) {
            if (this.currentTab === index) return
            this.currentTab = index
            this.orderList = []
            this.page = 1
            this.hasMore = true
            await this.loadOrders()
        },
        
        // 加载订单列表
        async loadOrders() {
            if (this.loading || !this.hasMore) return
            this.loading = true
            
            try {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    status: this.tabs[this.currentTab].status
                }
                
                const res = await getOrderList(params)
                
                if (this.page === 1) {
                    this.orderList = res.list
                } else {
                    this.orderList = [...this.orderList, ...res.list]
                }
                
                this.hasMore = res.list.length === this.pageSize
                this.page++
            } catch (error) {
                uni.showToast({
                    title: '加载失败',
                    icon: 'none'
                })
            } finally {
                this.loading = false
            }
        },
        
        // 加载更多
        loadMore() {
            if (this.hasMore) {
                this.loadOrders()
            }
        },
        
        // 获取状态文本
        getStatusText(status) {
            const statusMap = {
                0: '待支付',
                1: '使用中',
                2: '已完成',
                3: '已取消'
            }
            return statusMap[status] || '未知状态'
        },
        
        // 格式化时间
        formatTime(time) {
            if (!time) return ''
            return time.replace('T', ' ').substring(0, 16)
        },
        
        // 跳转到订单详情
        goToDetail(orderId) {
            uni.navigateTo({
                url: `/pages/order/detail?id=${orderId}`
            })
        },
        
        // 结束使用
        async endUse(orderId) {
            try {
                await endOrder(orderId)
                uni.showToast({
                    title: '操作成功',
                    icon: 'success'
                })
                // 刷新订单列表
                this.page = 1
                this.orderList = []
                this.loadOrders()
            } catch (error) {
                uni.showToast({
                    title: error.message || '操作失败',
                    icon: 'none'
                })
            }
        },
        
        // 支付订单
        async payOrder(orderId) {
            try {
                const res = await payOrder(orderId)
                // TODO: 调用微信支付
                uni.showToast({
                    title: '支付成功',
                    icon: 'success'
                })
                // 刷新订单列表
                this.page = 1
                this.orderList = []
                this.loadOrders()
            } catch (error) {
                uni.showToast({
                    title: error.message || '支付失败',
                    icon: 'none'
                })
            }
        },
        
        // 再次使用
        useAgain(deviceNo) {
            uni.navigateTo({
                url: `/pages/device/detail?code=${deviceNo}`
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    
    .tab-bar {
        display: flex;
        background-color: #fff;
        height: 88rpx;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        
        .tab-item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            color: #666;
            position: relative;
            
            &.active {
                color: #07c160;
                font-weight: bold;
                
                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 40rpx;
                    height: 4rpx;
                    background-color: #07c160;
                    border-radius: 2rpx;
                }
            }
        }
    }
    
    .order-list {
        padding: 20rpx;
        margin-top: 88rpx;
        
        .order-item {
            background-color: #fff;
            border-radius: 12rpx;
            margin-bottom: 20rpx;
            padding: 30rpx;
            
            .order-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;
                
                .hospital-name {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                }
                
                .order-status {
                    font-size: 28rpx;
                    
                    &.status-0 {
                        color: #f44336;
                    }
                    &.status-1 {
                        color: #2196f3;
                    }
                    &.status-2 {
                        color: #999;
                    }
                }
            }
            
            .order-content {
                .info-row {
                    margin-bottom: 10rpx;
                    font-size: 28rpx;
                    
                    .label {
                        color: #999;
                    }
                    
                    .value {
                        color: #333;
                    }
                }
            }
            
            .order-footer {
                margin-top: 20rpx;
                padding-top: 20rpx;
                border-top: 1rpx solid #eee;
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .price {
                    font-size: 32rpx;
                    color: #f44336;
                    font-weight: bold;
                }
                
                .actions {
                    display: flex;
                    gap: 20rpx;
                    
                    .action-btn {
                        margin: 0;
                        padding: 0 30rpx;
                        height: 60rpx;
                        line-height: 60rpx;
                        font-size: 26rpx;
                        border-radius: 30rpx;
                        background: #f5f5f5;
                        color: #666;
                        
                        &.primary {
                            background: #07c160;
                            color: #fff;
                        }
                    }
                }
            }
        }
        
        .empty-state {
            padding: 100rpx 0;
            text-align: center;
            
            image {
                width: 200rpx;
                height: 200rpx;
                margin-bottom: 20rpx;
            }
            
            text {
                font-size: 28rpx;
                color: #999;
            }
        }
        
        .loading-more {
            text-align: center;
            font-size: 24rpx;
            color: #999;
            padding: 20rpx 0;
        }
    }
}
</style> 